import React, { useEffect } from "react"
import Taro from "@tarojs/taro"
import { Image, View } from "@tarojs/components"
import bgImage from "../../assets/images/detail-banner.png"
import phoneIcon from "../../assets/images/phone-icon.png"
import addressIcon from "../../assets/images/address-icon.png"
import clockIcon from "../../assets/images/clock-icon.png"
import "./index.scss"
import NavBar from "../../components/navbar"

export default function () {
  useEffect(() => {
    Taro.setNavigationBarColor({
      frontColor: "#ffffff",
      backgroundColor: "#000000",
    })
  }, [])
  return (
    <View className="page-store-detail">
      <View className="header">
        <Image src={bgImage} className="header-bg"></Image>
        <View className="header-mask"></View>
      </View>
      <NavBar title="球馆详情" placeholdHeight={false}></NavBar>
      <View className="title">球馆详情</View>
      <View className="row-list">
        <View className="row">
          <Image src={addressIcon} className="icon"></Image>
          <View className="label">位置</View>
          <View className="value">嘉定区墨玉路621号</View>
        </View>
        <View className="row">
          <Image src={clockIcon} className="icon"></Image>
          <View className="label">时间</View>
          <View className="value">8:00 am-22:00 pm</View>
        </View>
        <View className="row">
          <Image src={phoneIcon} className="icon"></Image>
          <View className="label">电话</View>
          <View className="value phone" onClick={() => Taro.makePhoneCall({ phoneNumber: "13818144484" })}>
            138 1814 4484
          </View>
        </View>
      </View>
    </View>
  )
}
